<template>
  <div class="no-data flex flex-col justify-center items-center py-20 w-full" v-loading="boxLoading" element-loading-custom-class="custom-loading">
    <template v-if="!boxLoading && currentConfig">
      <img class="object-contain w-64 h-48" :src="currentConfig.imgSrc" :alt="currentConfig.alt" loading="lazy" />
      <div v-if="currentConfig.mainText" class="mt-4 text-xl font-medium text-gray-800 capitalize">
        {{ $t(currentConfig.mainText) }}
      </div>
      <div v-if="currentConfig.subText" class="mt-1 text-sm text-gray-500 capitalize">
        {{ $t(currentConfig.subText) }}
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    props: {
      loading: {
        type: Boolean,
        default: () => false
      },
      type: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        boxLoading: this.loading
      }
    },
    computed: {
      currentConfig() {
        const configs = {
          shopcar: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/no-shopcar.png',
            alt: 'Empty shopping cart',
            mainText: 'emptyText.shopcarEmpty'
          },
          order: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/no-data.png',
            alt: 'No orders available',
            mainText: 'emptyText.noOrder'
          },
          collect: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/no-collect.png',
            alt: 'No favorites',
            mainText: 'emptyText.noCollect'
          },
          notice: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/no-notice.png',
            alt: 'No notifications',
            mainText: 'emptyText.noNotice'
          },
          404: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/404.png',
            alt: '404 error'
          },
          search: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/no-search.png',
            alt: 'No search results',
            mainText: 'emptyText.noSearchData',
            subText: 'emptyText.noSearchNotice'
          },
          default: {
            imgSrc: 'https://cd.sealmg.com/assets/img/empty-img/no-data.png',
            alt: 'No data',
            mainText: 'emptyText.noData'
          }
        }
        return configs[this.type] || configs.default
      }
    },
    watch: {
      loading(newVal) {
        this.boxLoading = newVal
      }
    }
  }
</script>
<style scoped lang="less">
  /* 保留必要的scoped样式 */
</style>
<style>
  .custom-loading .el-loading-spinner .path {
    stroke: #ff4e33 !important;
  }
</style>
